<template>
	<div class="patient">
		<el-row>
			<el-col>
        <el-date-picker
          style="width:230px;"
          v-model="params.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
          :picker-options="pickerOptions2">
        </el-date-picker>
				<el-select v-model="params.status" @change="getList"  placeholder="请选择咨询状态" style="width:180px;">
					<el-option
						v-for="item in searchList"
						:key="item.id"
						:label="item.label"
						:value="item.id">
					</el-option>
				</el-select>
        <el-input
          style="width:200px;"
          placeholder="请输入咨询手机号"
          clearable
          v-model="params.kw">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
				<el-button @click="getList" class="search-btn" type="primary" icon="el-icon-search">搜索</el-button>
			</el-col>
		</el-row>
		<el-row class="patient-table">
			<el-table
				:data="list"
				stripe
				v-loading="tableLoading"
				header-row-class-name="table-header"
				empty-text=""
				:header-cell-style="tableHeaderObj"
				:cell-style="cellStyle"
				:max-height="tableHeight"
				@row-click="viewAccount"
				style="width: 100%; border: 1px solid #ebeef5">
				<el-table-column
					prop="clinic_num"
					label="机构ID"
					width="120"
					align="center">
				</el-table-column>
				<el-table-column
					prop="product_name"
					label="机构套餐"
					width="140"
					align="center">
          <template slot-scope="scope">
            <span>{{scope.row.product_name}} （ ¥ {{scope.row.price}} ）</span>
          </template>
				</el-table-column>
				<el-table-column
					prop="advisory_account"
					label="咨询账号"
					width="120"
					align="center">
				</el-table-column>
				<el-table-column
					label="咨询主题"
					min-width="300"
					align="center">
					<template slot-scope="scope">
						<div v-if="scope.row.subject.length>17">
							<el-tooltip class="item" effect="dark" :content="scope.row.subject" placement="top">
								<span class="authority-text">{{scope.row.subject}}</span>
							</el-tooltip>
						</div>
						<div v-else>
							{{scope.row.subject}}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					label="咨询创建时间"
					width="150"
					align="center">
					<template slot-scope="scope">
						<span v-show="scope.row.advisory_time==0">-</span>
						<span v-show="scope.row.advisory_time!=0">{{scope.row.advisory_time}}</span>
					</template>
				</el-table-column>
        <el-table-column
					label="最新追问/回复"
					width="150"
					align="center">
					<template slot-scope="scope">
						<span>{{scope.row.last_reply_time}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="回复记录"
					width="120"
					align="center">
					<template slot-scope="scope">
						<span>{{scope.row.reply_count}}</span>
					</template>
				</el-table-column>
        <el-table-column
					label="咨询状态"
					width="120"
					align="center">
					<template slot-scope="scope">
						<span :class="{'color-b':scope.row.advisory_status_text=='待回复'}">{{scope.row.advisory_status_text}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					min-width="120"
					align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.advisory_status_text==='待回复'" @click.stop="replyBtn(scope.row)" class="span-btn">{{scope.row.reply_flag==='1'?'电话回复':'工单回复'}}</span>
						<span v-else></span>
					</template>
				</el-table-column>
			</el-table>
			<div class="list-page">
				<el-pagination v-if="totalCount>10"
											 background
											 layout="total, slot, prev, pager, next"
											 :total="totalCount"
											 @current-change="handleCurrentChange">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
				<el-pagination v-else
											 background
											 layout="total, slot"
											 :total="totalCount">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
			</div>
		</el-row>
		<!--查看dialog-->
		<el-dialog
			title=""
			class="task-dialog"
			:visible.sync="dialogViewAccount"
			:show-close="false"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:modal="true">
			<div class="task-dialog-header">
				<div class="header-left">
					咨询详情
				</div>
				<div class="header-right">
					<el-button size="small" @click="dialogViewAccount = false">关闭</el-button>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="form-wrap">
				<el-scrollbar>
					<el-form :model="row" class="card-form" label-width="100px" v-if="dialogViewAccount">
						<el-row>
							<el-col>
								<div class="item-title"><span>咨询信息</span><span>{{row.advisory_info.create_time}}</span></div>
								<el-form-item label="咨询主题：" class="card-item-1">
									<span>{{row.advisory_info.subject}}</span>
								</el-form-item>
								<el-form-item label="咨询内容：" class="card-item-1">
									<span>{{row.advisory_info.content}} </span>
								</el-form-item>
								<el-form-item label="附件" class="card-item-1 fujian" v-if="row.advisory_info.attach.length>0">
									<span class="img-wrap" v-for="(item, index) in row.advisory_info.attach" :key="index"><img @click="viewImg(item)" :src="item" alt=""></span>
								</el-form-item>
							</el-col>
							<el-col v-for="(item,index) in row.apply_info" :key="index">
								<div class="item-title"><span>{{item.label}}</span><span>{{item.time}}</span></div>
								<el-form-item :label="item.label+'内容：'" class="card-item-1">
									<span>{{item.apply_content}}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-scrollbar>
			</div>
		</el-dialog>
		<!-- 回复dialog -->
		<el-dialog
			title=""
			class="task-dialog"
			:visible.sync="replyDialog"
			:show-close="false"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:modal="true">
			<div class="task-dialog-header">
				<div class="header-left">
					{{row.product_name}}
					{{rowType===3?'电话回复':'工单回复'}}
				</div>
				<div class="header-right">
					<el-button size="small" @click="cancelBtn">取消</el-button>
					<el-button v-if="rowType===3" type="primary" size="small" @click="dhBtn">已回复</el-button>
					<el-button v-else type="primary" size="small" @click="gdBtn">确定</el-button>
				</div>
				<div class="clearfix"></div>
			</div>
			<!-- 电话回复 -->
			<div class="form-wrap" v-if="rowType===3">
				<el-scrollbar>
					<el-form :model="row" class="card-form" label-width="100px">
						<el-row v-if="replyDialog">
							<el-col>
								<div class="item-title"><span>咨询信息</span><span>{{row.advisory_info.create_time}}</span></div>
								<el-form-item label="咨询主题：" class="card-item-1">
									<span>{{row.advisory_info.subject}}</span>
								</el-form-item>
								<el-form-item label="咨询内容：" class="card-item-1">
									<span>{{row.advisory_info.content}} </span>
								</el-form-item>
								<el-form-item label="附件" class="card-item-1 fujian" v-if="row.advisory_info.attach.length>0">
									<span class="img-wrap" v-for="(item,index) in row.advisory_info.attach" :key="index"><img @click="viewImg(item)" :src="item" alt=""></span>
								</el-form-item>
							</el-col>
							<el-col v-for="(item,index) in row.apply_info" :key="index">
								<div class="item-title"><span>{{item.label}}</span><span>{{item.time}}</span></div>
								<el-form-item :label="item.label+'内容：'" class="card-item-1">
									<span>{{item.apply_content}}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-scrollbar>
			</div>
			<!-- 工单回复 -->
			<div class="form-wrap" v-if="rowType===2">
					<el-form :model="row" class="card-form" label-width="100px">
						<el-row>
							<el-col>
								<div class="item-title"><span>回复</span><span></span></div>
								<el-form-item label="客服回复：" class="card-item-1 huifu">
									<el-input
										type="textarea"
										:autosize="{ minRows: 3,maxRows: 3}"
										placeholder="请输入内容，限字500"
										maxlength="500"
										v-model="textarea"
										>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="replyDialog">
							<el-col>
								<div class="item-title"><span>咨询信息</span><span>{{row.advisory_info.create_time}}</span></div>
								<div class="gd-scroll">
									<el-scrollbar>
										<el-form-item label="咨询主题：" class="card-item-1">
											<span>{{row.advisory_info.subject}}</span>
										</el-form-item>
										<el-form-item label="咨询内容：" class="card-item-1">
											<span>{{row.advisory_info.content}} </span>
										</el-form-item>
										<el-form-item label="附件" class="card-item-1 fujian" v-if="row.advisory_info.attach.length>0">
											<span class="img-wrap" v-for="(item,index) in row.advisory_info.attach" :key="index"><img @click="viewImg(item)" :src="item" alt=""></span>
										</el-form-item>
										<el-col v-for="(item,index) in row.apply_info" :key="index">
											<div class="item-title"><span>{{item.label}}</span><span>{{item.time}}</span></div>
											<el-form-item :label="item.label+'内容：'" class="card-item-1">
												<span>{{item.apply_content}}</span>
											</el-form-item>
										</el-col>
									</el-scrollbar>
								</div>
							</el-col>
						</el-row>
					</el-form>
			</div>
		</el-dialog>
		<!-- 图片 -->
		<component :is="viewPicture" :dialogViewVisible="dialogViewVisible" :imgs="imgSrc" @updateView="updateView" :showPrint="false"></component>
	</div>
</template>
<style scoped>
.gd-scroll {
	height: 40vh;
}
@media screen and (max-height: 560px) {
	.gd-scroll {
		height: 30vh;
	}
}
@media screen and (min-height: 850px) {
	.gd-scroll {
		height: 50vh;
	}
}
/* 滚动条 */
.form-wrap {
	height: 71vh;
	overflow: hidden;
}
.el-scrollbar {
	height:100%;
}
.task-dialog .el-dialog__header {
	display: none;
}
.form-wrap /deep/ .el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
.form-wrap /deep/ .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view > div:last-child .card-item-1 .el-form-item__content{
	padding-bottom: 20px;
}
/* 咨询信息 */
.huifu {
	margin: 20px 0!important;
}
.task-dialog .el-form-item {
	margin-bottom: 0;
}
.item-title {
	height: 40px;
	line-height: 40px;
	padding: 0 30px;
	font-weight: 600;
	background:#f5f7fa;
	margin: 10px 0;
}
.item-title span:last-child {
	float: right;
	font-weight: normal;
}
.el-form >>> .fujian label {
	letter-spacing: 24px;
	position: relative;
}
.el-form >>> .fujian label:after {
	content: '：';
	width: 0;
	height: 0;
	position: absolute;
	right: 45px;
	top: 0;
}
.el-form >>> .fujian > div {
	margin-top: 10px;
}
.el-form >>> .el-form-item .el-form-item__label {
	line-height: 2;
}
.el-form >>> .el-form-item .el-form-item__content {
	line-height: 2;
}
.img-wrap {
	display: inline-block;
	width: 160px;
	height: 160px;
	border: 1px dotted #999;
	border-radius: 4px;
	margin-right: 10px;
}
.img-wrap img {
	width: 100%;
	height: 100%;
	border-radius: 4px;
}
	.patient{
		position:relative;
		height:100%;
	}
	.search-input{
		width:320px;
	}
	.search-btn{
		margin-left:15px;
		margin-right:15px;
	}
	.add-btn{
		margin-right:50px;
	}
	.high-search{
		font-size:14px;
		color:#409eff;
		cursor: pointer;
	}
	.high-search i{
		margin-left:5px;
	}
	.patient-table{
		height:calc(100vh - 220px);
		margin-top:40px;
	}
	.list-page{
		text-align: center;
		position:absolute;
		bottom:0px;
		left:50%;
		transform:translateX(-50%);
		margin-top:20px;
	}
	.page-span{
		margin-left:-14px;
		font-size:13px;
		margin-right:20px;
	}
	.color-red{
		color: #f56c6c!important;
	}
	.color-b{
		color:#409EFF!important;
		cursor: pointer;
	}
	.search-row{
		overflow-x: auto;
		margin-bottom:10px;
	}
	.search-row >>> .el-scrollbar__wrap{
		overflow-x: scroll;
	}
	.search-row >>> .el-select{
		margin-right:10px;
	}
	.search-row >>> .el-input__inner{
		width:0;
		padding:0;
		border:0;
		height:45px;
		line-height:45px;
	}
	.search-row >>> .el-input__prefix, .search-row >>> .el-input__suffix{
		position:relative;
	}
	.search-row >>> .el-input__prefix{
		margin-right:8px;
		cursor: pointer;
		color:#909399;
	}
	.search-row >>> .el-select .el-input .el-select__caret{
		color:#909399;
	}
	.select-age >>> .el-popper{
		display: none;
	}
	.age-popper >>> .el-input{
		width:100px;
	}
	.age-popper >>> .el-input__inner{
		text-align: center;
	}
	.el-popper[x-placement^=bottom]{
		margin-top:-6px;
	}
	.el-form--inline .el-form-item{
		margin-right:0;
		margin-top:5px;
		margin-bottom:10px;
	}
	.card-picker >>> .el-input__icon{
		display: none;
	}
	.card-picker >>> .el-range-separator{
		display: none;
	}
	.search-date{
		color:#909399;
		font-size:14px;
		cursor: pointer;
		margin-right:10px;
	}
	.search-date i{
		margin-left:4px;
		color:#909399;
	}
	.search-row >>> .el-date-editor{
		margin-right:10px;
	}
	.cascader-select >>> .el-cascader__label{
		padding:0;
	}
	.cascader-select >>> .el-input__suffix{
		display: none;
	}
	.block-row{
		height:55px;
	}
	.task-dialog >>> .el-dialog {
		/* margin: 15vh auto; */
		margin: 4vh auto!important;
		overflow: auto;
	}
	.task-dialog >>> .el-dialog__header{
		padding:10px 20px 10px;
	}
	.task-dialog-header {
		padding: 0 30px;
		margin-bottom: 10px;
	}
	.task-dialog-header .header-left {
		float: left;
		font-weight: bold;
		font-size: 16px;
		line-height: 44px;
	}
	.task-dialog-header .header-right {
		float: right;
		clear: right;
	}
	.task-dialog-header .header-right >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
		margin-top:6px;
	}
	.task-dialog >>> .el-dialog__body{
		padding:10px 0 20px;
	}
	.card-form .card-item-1{
		padding:0 30px;
		box-sizing: border-box;
	}
	.card-form .account-mobile span{
		display: block;
	}
	.card-form .rights-type-text{
		display: inline-block;
		margin-left:10px;
	}
	.card-form .card-item-1 >>> .el-input{
		width:220px;
	}
	.card-form >>> .el-form-item__label{
		text-align: left;
	}
	.l-space-28 >>> .el-form-item__label{
		letter-spacing: 28px;
	}
	.l-space-28-r >>> .el-form-item__label{
		text-indent: 10px;
	}
	.l-space-7 >>> .el-form-item__label{
		letter-spacing: 7px;
	}
	.card-form .key-info-left{
		width:50%;
		float:left;
	}
	.card-form .key-info-right{
		width:50%;
		float:right;
	}
	.card-form .key-info-right .picture-text{
		display: inline-block;
		width:100px;
		position:relative;
		top:-62px;
		line-height:22px;
		margin-left:27px;
	}
	.card-form .card-item-2{
		padding:0 0 0 30px;
		box-sizing: border-box;
	}
	.card-form .card-item-2 >>> .el-input{
		width:170px;
	}
	.card-form .card-item-3 >>> .el-input{
		width:572px;
	}
	.card-form .card-item-4 >>> .el-input{
		width:130px;
		margin-right:13px;
	}
	.card-form .card-item-5 >>> .el-input{
		width:210px;
	}
	.card-form .card-item-4 >>> .el-select:last-of-type .el-input{
		margin-right:0;
	}
	.card-form .birthday-text{
		display: inline-block;
		width: 30px;
		text-align: right;
	}
	.card-form >>> .el-form-item__label{
		padding:0;
	}
	.card-form >>> .el-form-item.is-required .el-form-item__label:before{
		letter-spacing: 0;
	}
	.card-form >>> .el-checkbox{
		width:110px;
	}
	.card-form >>> .el-checkbox+.el-checkbox{
		margin-left:0;
	}
	.patient >>> .el-table th.gutter{
		background-color:#f5f7fa;
	}
	.span-btn{
		color:#409EFF;
		cursor:pointer;
		margin-right:18px;
	}
	.span-btn:last-of-type{
		margin-right:0;
	}
	.authority-text{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width:250px;
		display: inline-block;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
		border-color: #fff;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
		background-color:#a5c7ff;
		border-color:#a5c7ff;
	}
	.card-form >>> .el-checkbox__input.is-disabled+span.el-checkbox__label{
		color:#a5c7ff;
	}
	.reset-dialog >>> .el-dialog{
		border-radius:5px;
	}
	.reset-dialog >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
	}
	.reset-dialog >>> .el-dialog__body{
		padding-top:10px;
	}
	.reset-dialog >>> .el-form-item__label{
		text-align: left;
	}
	.reset-dialog >>> .el-form-item{
		margin-bottom:0;
	}
</style>
<style>
	.community-cas{
		margin-left:-80px;
	}
	.create-time-popper{
		margin-left:-55px;
	}
	.mobile-popper{
		background-color: #333333;
		border:0;
	}
	.mobile-popper .el-popover__title{
		text-align: center;
		color:#fff;
		margin-bottom: 15px;
		margin-top:10px;
	}
	.mobile-popper[x-placement^=top] .popper__arrow::after{
		border-top-color:#333333;
	}
</style>
<script>
	import { getList, workSelect, workReply, workDetail } from '@/api/service'
	import viewPicture from './viewPicture'
	export default{
		data () {
			return {
				viewPicture,
				dialogViewVisible: false,
				imgSrc: [],
				list: [],
				tableLoading: true,
				tableHeaderObj: {
					'background-color': '#f5f7fa',
					'color': '#606266',
					'height': '68px'
				},
				cellStyle: {
					'height': '68px',
					'cursor': 'pointer'
				},
				totalCount: 0,
				tableHeight: 0,
				page: {
					'per-page': 10,
					page: 1
				},
				pickerOptions2: {
					disabledDate(time) {
						return time.getTime() > Date.now()
					},
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit('pick', [start, end])
						}
					}]
				},
        params: {
          kw: '',
          status: '',
          date: '',
          begin_time: '',
          end_time: ''
        },
				searchList: [],
				nameList: [],
				operateId: '',
				dialogViewAccount: false,
				replyDialog: false,
				row: {advisory_info:{attach:[]}},
				textarea: '',
				rowId: '',
				rowType: ''
			}
		},
		created () {
			this.getSelect()
			this.getList()
					this.newTime()
		},
		mounted() {
			const that = this
			that.$nextTick(() => {
				that.tableHeight = document.documentElement.clientHeight - 280
			})
			window.onresize = () => {
				that.$nextTick(() => {
					that.tableHeight = `${document.documentElement.clientHeight}` - 280
				})
			}
		},
		methods: {
			// 获取列表
			getList() {
				this.tableLoading = true
				if (this.params.date) {
          this.params.begin_time = this.params.date[0]
          this.params.end_time = this.params.date[1]
        } else {
					this.params.begin_time = ''
					this.params.end_time = ''
				}
				getList(Object.assign({}, this.page, this.params)).then(response => {
					this.tableLoading = false
					this.list = response.data.data
					this.totalCount = response.data._meta.totalCount
				})
			},
			getSelect() {
				workSelect().then(response => {
					this.searchList = response.data
				})
			},
			handleCurrentChange(val) {
				this.page.page = val
				this.getList()
			},
			// 查看
			viewAccount(row, event, column) {
				workDetail({id: row.id}).then(response => {
					this.row = response.data
					this.dialogViewAccount = true
				})
			},
			replyBtn(row) {
				this.rowId = row.id
				if (row.reply_flag==='1') {
					this.rowType = 3
				} else {
					this.rowType = 2
				}
				workDetail({id: row.id}).then(response => {
					this.row = response.data
				})
				this.replyDialog = true
			},
			gdBtn() {
				if (this.textarea.length === 0) {
					this.$message.error('请填写回复')
					return false
				}
				workReply({id: this.rowId, reply_type: this.rowType, content: this.textarea}).then(response => {
					// this.list.forEach((item, index) => {
					// 	if (this.rowId === item.id) {
					// 		var time = this.newTime()
					// 		this.list[index].advisory_status_text = '已回复'
					// 		this.list[index].last_reply_time = time
					// 	}
					// })
					this.getList()
					this.replyDialog = false
					this.textarea = ''
					this.$message({
						type: 'success',
						message: '回复完成！'
					})
				})
			},
			dhBtn() {
				workReply({id: this.rowId, reply_type: this.rowType}).then(response => {
						// this.list.forEach((item, index) => {
						// 	if (this.rowId === item.id) {
						// 		var time = this.newTime()
						// 		this.list[index].last_reply_time = time
						// 		this.list[index].advisory_status_text = '已回复'
						// 	}
						// })
						this.getList()
						this.replyDialog = false
						this.textarea = ''
						this.$message({
							type: 'success',
							message: '回复完成！'
						})
				})
			},
			cancelBtn() {
				this.replyDialog = false
				this.textarea = ''
			},
			viewImg (url) {
			 	this.imgSrc = []
			 	this.dialogViewVisible = true
				 this.imgSrc.push(url)
			},
			updateView (flag) {
				this.dialogViewVisible = flag
			},
			newTime() {
        var date = new Date();  
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        month = month<10?'0' + month:month;
        day = day<10?'0' + day:day;
        hours = hours<10?'0' + hours:hours;
        minutes = minutes<10?'0' + minutes:minutes;
        seconds = seconds<10?'0' + seconds:seconds;
				var str = year + '-' + month + '-' + day + " " + hours + ":" + minutes;
        return str;
    
			}
		}
	}
</script>
